<template>
  <view class="goodsPublish-view">
    <view class="search-view">
      <u-search :placeholder="$t('goodsPublish.search')" v-model="serachValue" :show-action="false"
                :disabled="true" @click="clickSearch" @change="serachChange" height="37">
      </u-search>
    </view>

    <view class="hint">
      {{$t('goodsPublish.hint')}}
    </view>

    <view class="goods-list" v-if="testData.length > 0">
      <u-swipe-action>
        <u-swipe-action-item :name="item.id" @click="handleGoods" :options="options2" v-if="item.status == 1"
                             v-for="item in testData">
          <view class="goods">
            <view class="goods-item">
              <image @tap="goDetails(item.id)" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture"
                     mode="aspectFit" class="goods-img"></image>
              <view class="goods-desc">
                <h3>{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}</h3>
                <view class="price-sell">
                  <view class="price">
                    $ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
                  </view>
                  <!-- <view class="low-price">
                    {{$t("common.lowestQuotation")}}
                  </view> -->
                  <view class="sell">
                    {{item.status==1?$t('common.noSold'):$t('common.sold')}}
                  </view>
                </view>
                <view class="btn">
                  <AuctionButton v-if="![0,2,3,4,5].includes(item.status)" :go="1"
                                 @sellGoods="sellGoods" :buyerStatus="item.buyerState"
                                 :orderStatus="item.saleState" :item="item" :butEffect="item.status"
                                 :desc="item.content" :red="item.red"></AuctionButton>
                  <AuctionButton @fakeConfirm="fakeConfirm" @retuenConfirm="retuenConfirm" :butEffect="item.status"
                                 :orderStatus="item.saleState" :buyerStatus="item.buyerState" :item="item">
                  </AuctionButton>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>

        <u-swipe-action-item :name="item.id" @click="handleGoodsLow" :options="options2" v-if="item.status == 11"
                             v-for="item in testData">
          <view class="goods">
            <view class="goods-item">
              <image @tap="goDetails(item.id)" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture"
                     mode="aspectFit" class="goods-img"></image>
              <view class="goods-desc">
                <h3>{{ $t("goodsReleased.language") == "zh" ? item.commodity : item.commodityEn }}</h3>
                <view class="price-sell">
                  <view class="price">
                    $ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
                  </view>
                  <!-- <view class="low-price">
                    {{$t("common.lowestQuotation")}}
                  </view> -->
                  <view class="sell">
                    {{item.status==1?$t('common.noSold'):item.status==11||item.status==12?$t('GoodsItem.wish'):$t('common.sold')}}
                  </view>
                </view>
                <view class="btn">
                  <AuctionButton v-if="![0,2,3,4,5].includes(item.status)" :go="1"
                                 @sellGoods="sellGoods" :buyerStatus="item.buyerState"
                                 :orderStatus="item.saleState" :item="item" :butEffect="item.status"
                                 :desc="item.content"></AuctionButton>
                  <AuctionButton @fakeConfirm="fakeConfirm" @retuenConfirm="retuenConfirm" :butEffect="item.status"
                                 :orderStatus="item.saleState" :buyerStatus="item.buyerState" :item="item">
                  </AuctionButton>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>

        <u-swipe-action-item :name="item.id" @click="handleGoodsLow" :options="options3" v-if="item.status == 12"
                             v-for="item in testData">
          <view class="goods">
            <view class="goods-item">
              <image @tap="goDetails(item.id)" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture"
                     mode="aspectFit" class="goods-img"></image>
              <view class="goods-desc">
                <h3>{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}</h3>
                <view class="price-sell">
                  <view class="price">
                    $ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
                  </view>
                  <!-- <view class="low-price">
                    {{$t("common.lowestQuotation")}}
                  </view> -->
                  <view class="sell">
                    {{item.status==1?$t('common.noSold'):item.status==11||item.status==12?$t('GoodsItem.wish'):$t('common.sold')}}
                  </view>
                </view>
                <view class="btn">
                  <AuctionButton v-if="![0,2,3,4,5].includes(item.status)" :go="1"
                                 @sellGoods="sellGoods" :buyerStatus="item.buyerState"
                                 :orderStatus="item.saleState" :item="item" :butEffect="item.status"
                                 :desc="item.content"></AuctionButton>
                  <AuctionButton @fakeConfirm="fakeConfirm" @retuenConfirm="retuenConfirm" :butEffect="item.status"
                                 :orderStatus="item.saleState" :buyerStatus="item.buyerState" :item="item">
                  </AuctionButton>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>

        <u-swipe-action-item :name="item.id" @click="handleGoodsLow" :options="options3" v-if="item.status == 2"
                             v-for="item in testData">
          <view class="goods">
            <view class="goods-item">
              <image @tap="goDetails(item.id)" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture"
                     mode="aspectFit" class="goods-img"></image>
              <view class="goods-desc">
                <h3>{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}</h3>
                <view class="price-sell">
                  <view class="price">
                    $ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
                  </view>
                  <!-- <view class="low-price">
                    {{$t("common.lowestQuotation")}}
                  </view> -->
                  <view class="sell">
                    {{item.status==1?$t('common.noSold'):item.status==11||item.status==12?$t('GoodsItem.wish'):$t('common.sold')}}
                  </view>
                </view>
                <view class="btn">
                  <!-- <AuctionButton v-if="![0,2,3,4,5].includes(item.status)" :go="1" -->
                  <AuctionButton :go="1" :isShow="true"
                                 @sellGoods="sellGoods" :buyerStatus="item.buyerState"
                                 :orderStatus="item.saleState" :item="item" :butEffect="item.status"
                                 :desc="item.content"></AuctionButton>
                  <AuctionButton @fakeConfirm="fakeConfirm" @retuenConfirm="retuenConfirm" :butEffect="item.status"
                                 :orderStatus="item.saleState" :isShow="false" :buyerStatus="item.buyerState" :item="item">
                  </AuctionButton>
                </view>
              </view>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>

      <view class="goods" v-if="item.status !== 10 && item.status !== 2 && item.status !== 1&& item.status !== 11&& item.status !== 12"
            v-for="item in testData">
        <view class="goods-item">
          <image @tap="goDetails(item.id)" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture"
                 mode="aspectFit" class="goods-img"></image>
          <view class="goods-desc">
            <h3>{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}</h3>
            <view class="price-sell">
              <view class="price">
                $ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
              </view>
              <!-- <view class="low-price">
                {{$t("common.lowestQuotation")}}
              </view> -->
              <view class="sell">
                {{item.status==1?$t('common.noSold'):item.status==11||item.status==12?$t('GoodsItem.wish'):$t('common.sold')}}
              </view>
            </view>
            <view class="btn">
              <!-- <AuctionButton v-if="![0,2,3,4,5].includes(item.status)" :go="1" @sellGoods="sellGoods" -->
              <AuctionButton :go="1" @sellGoods="sellGoods" :isShow="true"
                             :buyerStatus="item.buyerState" :orderStatus="item.saleState" :item="item"
                             :butEffect="item.status" :desc="item.content"></AuctionButton>
              <AuctionButton @fakeConfirm="fakeConfirm" @retuenConfirm="retuenConfirm" :butEffect="item.status"
                             :orderStatus="item.saleState" :isShow="false" :buyerStatus="item.buyerState" :item="item">
              </AuctionButton>
            </view>
          </view>
        </view>
      </view>

      <view class="pla">

      </view>

      <!-- 	<u-modal :show="hintShow" confirmColor="#000" :confirmText="confirmText" :cancelText="cancelText" :content='content'
          @confirm="sureConfirm" @close="hintShow=false" @cancel="hintShow=false" closeOnClickOverlay
          showCancelButton></u-modal> -->
      <!-- 			<view class="goods" v-for="(item, index) in 10" :key="item">
        <view class="goods-item">
          <image src="../../static/icon/bag.png" mode="" class="goods-img"></image>
          <view class="goods-desc">
            <h3>IOASDHJOIASHJ</h3>
            <view class="price-sell">
              <view class="price">
                $ 123123
              </view>
              <view class="low-price">
                最低报价
              </view>
              <view class="sell">
                已售0
              </view>
            </view>
            <view class="btn">
              <AuctionButton @lookSause="lookSause" :index="index" :butEffect="3" desc="哈哈哈">
                  已退回
              </AuctionButton>
            </view>
          </view>
        </view>

        <view class="desc-detail" v-if="current === index">
          鉴定为赝品，退货退货退货退货退鉴定为赝品，退货退货退货退货退货退货退货
        </view>
      </view> -->
    </view>

    <view class="publish-wish" @tap="goPublishGoods">
      {{$t("goodsReleased.publishBtn")}}
    </view>
  </view>
</template>

<script>
import AuctionButton from "../../components/AuctionButton/AuctionButton.vue"
import {
  myRequest
} from "../../common/request.js"
import {
  getGoodsPublish,
  updateOrder,
  putGoodsState,
  delGoods
} from "@/common/api.js"

export default {
  data() {
    return {
      serachValue: "",
      testData: [],
      current: null,
      active: false,
      isShow: false,
      hintShow: false,
      confirmText: this.$t('goodsPublish.confirmText'),
      cancelText: this.$t('goodsPublish.cancelText'),
      content: this.$t('goodsPublish.content'),
      returnItem: null,
      fakeItem: null,
      isRet: null,
      options2: [{
        text: this.$t("goodsPublish.edit"),
        style: {
          backgroundColor: '#3c9cff'
        }
      }, {
        text: this.$t("goodsPublish.down"),
        style: {
          backgroundColor: '#f56c6c'
        }
      }],
      options3: [{
        text: this.$t("goodsPublish.up"),
        style: {
          backgroundColor: '#3c9cff'
        }
      }, {
        text: this.$t("goodsPublish.del"),
        style: {
          backgroundColor: '#f56c6c'
        }
      }],
    }
  },
  methods: {
    goDetails(id) {
      uni.navigateTo({
        url: `/pages/commodityDetails/commodityDetails?id=${id}`
      })
    },
    // 商品商家删除操作
    async handleGoodsLow(obj) {
      if (obj.index == 0) {
        console.log("上架商品");
        const res = await putGoodsState({
          status: 1,
          id: obj.name
        });
        console.log(res);
        if (res.code == 200) {
          uni.redirectTo({
            url: "/pages/goodsPublish/goodsPublish"
          })
        }
      } else if (obj.index == 1) {
        console.log("删除商品");
        const res = await delGoods(obj.name);
        console.log(res);
        if (res.code == 200) {
          uni.redirectTo({
            url: "/pages/goodsPublish/goodsPublish"
          })
        }
      }
    },
    // 商品商家删除操作
    async handleGoods(obj) {
      console.log(obj);
      if (obj.index == 0) {
        const goods = this.testData.filter(item => item.id == obj.name);
        console.log(goods[0]);
        uni.navigateTo({
          url: `/pages/editGoods/editGoods?goods=${encodeURIComponent(JSON.stringify(goods[0]))}`
        })
      } else if (obj.index == 1) {
        console.log("下架商品");
        const res = await putGoodsState({
          status: 2,
          id: obj.name
        });
        console.log(res);
        if (res.code == 200) {
          uni.redirectTo({
            url: "/pages/goodsPublish/goodsPublish"
          })
        }
      }
    },
    retuenConfirm(obj) {
      this.hintShow = true;
      this.returnItem = obj.item;
      this.isRet = obj.isRet;
    },
    fakeConfirm(obj) {
      this.hintShow = true;
      this.fakeItem = obj.item;
      this.isRet = obj.isRet;
    },
    async sureConfirm() {
      this.hintShow = false;
      if(this.isRet) {
        const res = await updateOrder({
          id: this.returnItem.orderId,
          orderState: 11,
          orderStatus: 11,
          shopId: this.returnItem.id
        });
        if (res.code == 200) {
          this.initGoodsPublish();
        }
      } else {
        const res = await updateOrder({
          id: this.fakeItem.orderId,
          orderState: 2,
          orderStatus: 2,
          shopId: this.fakeItem.id
        });
        if (res.code == 200) {
          this.initGoodsPublish();
        }
      }
    },
    lookSause(index) {
      // console.log(index);
      if (index === this.current) {
        this.current = null;
        return
      }
      this.current = index;
      // this.active = active;
    },
    sellGoods(item) {
      console.log(item);
      // uni.navigateTo({
      // 	url: `/pages/lookGoodsPrice/lookGoodsPrice?id=${item.id}`,
      // })
    },
    serachChange(e) {
      console.log("搜索值:", e);
    },
    initGoodsPublish() {
      getGoodsPublish({
        pageSize: 1000
      }).then((res)=>{
        this.testData = res.rows;
        console.log(this.testData,5564);
      });

    },
    clickSearch() {
      uni.navigateTo({
        url: '/pages/search/search',
      });
    },
    goPublishGoods() {
      uni.navigateTo({
        url: '/pages/goodsReleased/goodsReleased',
      });
    }
  },
  components: {
    AuctionButton
  },
  onShow() {
    this.initGoodsPublish();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("goodsPublish.title")
    });
  }
}
</script>

<style>
page {
  background-color: #FBFBFB;
}
</style>
<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
}

.pla {
  height: 150rpx;
}

.hint {
  margin-top: 118rpx;
  text-align: center;
  font-size: 18rpx;
  color: #858585;
}

.u-swipe-action-item {
  margin: 20rpx 0;
}

.goodsPublish-view {
  width: 100%;
  height: 100%;
  margin-bottom: 150rpx;
}

.search-view {
  padding: 14rpx 22rpx;
  position: fixed;
  left: 0;
  /* #ifdef APP */
  top: 0;
  /* #endif */

  /* #ifdef H5 */
  top: 86rpx;
  /* #endif */
  background-color: #fff;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
}

.goods-list {
  height: 100%;
  background: #FBFBFB;
  padding: 0 30rpx;
  padding-top: 20rpx;
  // margin-top: 15rpx;
  // padding-bottom: 150rpx;
  padding-top: 0;
  margin: 20rpx 0;
}

.goods:first-child {
  margin: 0;
}

.goods-item {
  // height: 208rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-between;

  .goods-img {
    width: 300rpx;
    height: 208rpx;
    border-radius: 20rpx;
  }

  .goods-desc {
    margin-left: 18rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h3 {
      color: #000000;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 30rpx;
      letter-spacing: 0rpx;
      text-align: left;
      width: 356rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .price-sell {
      display: flex;
      align-items: flex-end;
      // justify-content: space-between;
      margin-top: 24rpx;

      .price {
        color: #FF0000;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        letter-spacing: 0rpx;
        vertical-align: bottom;
      }

      .low-price {
        color: #FF0000;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        line-height: 42rpx;
        letter-spacing: 0rpx;
        margin-left: 10rpx;
      }

      .sell {
        color: #717184;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        line-height: 42rpx;
        letter-spacing: 0rpx;
        margin-left: 10rpx;
      }
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;
      // position: relative;
    }
  }
}

.goods {
  position: relative;
  background-color: #fff;
  // box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.img-active {
  border-radius: 20rpx 20rpx 0 0 !important;
}

.desc-detail {
  margin-top: 20rpx;
  padding: 20rpx;
  text-align: center;
  background-color: #c6c6c6;
  border-radius: 0 0 20rpx 20rpx;
  // position: absolute;
  // bottom: -10rpx;
  // width: 94.4%;
  color: #fff;
  font-weight: bold;
}

.publish-wish {
  height: 90rpx;
  // border:1px solid red;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: #FFFFFF;
  font-family: PingFang SC;
  font-weight: bold;
  border-radius: 20rpx 20rpx 0 0;
  background: #000000;
  font-size: 36rpx;
  line-height: 90rpx;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
</style>
